<template>
    <el-container id="home-container">
        <!-- 头部区域 -->
        <el-header id="home-header">
            <span>代码质量量化评估系统</span>
            <el-button type="info" @click="logout">退出</el-button>
        </el-header>
        <el-container>
            <!-- 侧边栏 -->
            <el-aside id="home-aside" width="170px">
                <!-- 侧边栏菜单区域 -->
                <el-menu active-text-color="#ffd04b" background-color="#545c64" text-color="#fff" :router="true">
                    <!-- 一级菜单 -->
                    <el-sub-menu index="1" >
                        <!-- 一级菜单模板区域 -->
                        <template #title>
                            <span>项目管理</span>
                        </template>
                        <!-- 二级菜单 -->
                        <el-menu-item index="/home/projectList">
                            <!-- 二级菜单模板区域 -->
                            <template #title>
                                <span>项目列表</span>
                            </template>
                        </el-menu-item>
                        <el-menu-item index="/home/projectAdd">
                            <!-- 二级菜单模板区域 -->
                            <template #title>
                                <span>添加项目</span>
                            </template>
                        </el-menu-item>
                    </el-sub-menu>
                </el-menu>
                <el-menu active-text-color="#ffd04b" background-color="#545c64" text-color="#fff" :router="true">
                    <!-- 一级菜单 -->
                    <el-sub-menu index="2" >
                        <!-- 一级菜单模板区域 -->
                        <template #title>
                            <span>代码质量评估</span>
                        </template>
                        <!-- 二级菜单 -->
                        <el-menu-item index="/home/projectWholeInfo">
                            <!-- 二级菜单模板区域 -->
                            <template #title>
                                <span>整体信息</span>
                            </template>
                        </el-menu-item>
                        <el-menu-item index="/home/projectCodeInfo">
                            <!-- 二级菜单模板区域 -->
                            <template #title>
                                <span>源码信息</span>
                            </template>
                        </el-menu-item>
                        <el-menu-item index="/home/projectFunctionCall">
                            <!-- 二级菜单模板区域 -->
                            <template #title>
                                <span>调用图</span>
                            </template>
                        </el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </el-aside>
            <!-- 右侧内容主体 -->
            <el-main id="home-main">
                <!-- 路由占位符 -->
            <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
export default {
    name: "home",
    data() {
        return {}
    },
    methods: {
        logout() {
            window.sessionStorage.clear()
            this.$router.push('/login')
        },
    }
}
</script>

<style scoped>
#home-container {
    height: 100vh;
}

#home-header {
    background-color: #363d40;
    display: flex;
    justify-content: space-between;
    padding-left: 20;
    align-items: center;
    color: #fff;
    font-weight: bold;
    font-size: 25px;
}

#home-aside {
    background-color: #333744;
}

#home-main {
    background-color:beige;
}
</style>